<template>
	<view class="mPage">

		<u-sticky bgColor="#fff">
			<!-- <uni-nav-bar title="我的预约" statusBar :border="false" backgroundColor="#FFFFFF"></uni-nav-bar> -->
			<!-- <view style="height: 20rpx;" /> -->
			<u-tabs :list="menuList" :activeStyle="{
        color: '#26A0FF',
        fontWeight: 'bold',
        transform: 'scale(1.05)'
    }" :inactiveStyle="{
        color: '#232323',
        transform: 'scale(1)'
    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 40px;" lineWidth="53" lineHeight="6"
				@change="changeTab"></u-tabs>
		</u-sticky>

		<view v-for="(item,index) in mList" @click="toBookDetails(item)">
			<wCard :borderRadius="12" :marginTop="20">
				<view class="h-view">
					<text class="order-no">单号:{{item.order_no}}</text>
					<text class="stutas">{{item.status == 1 ? '待使用' : item.status == 2 ? '已使用' : ''}}</text>
				</view>
				<view class="content">
					<image class="cover" :src="item.item.thumb" mode="aspectFill"></image>
					<view class="right-content">
						<text class="name">{{item.store.store_name}}</text>
						<text class="project">预约项目：{{item.item.name}}</text>
						<text class="time">预约时间：{{item.order_date}} {{item.order_time}}</text>
					</view>
				</view>
			</wCard>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	import {
		navigateTo
	} from '@/utils/util.js'
	import {
		bookOrderList
	} from '@/api/index.js'
	import {
		onLoad,
		onReachBottom,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import wCard from '@/components/w-card.vue'
	const menuList = ref([{
		name: '全部',
	}, {
		name: '待核销',
	}, {
		name: '已核销'
	}, {
		name: '已取消'
	}]);

	const mList = ref([]);
	const page = ref(1);
	const status = ref(-1);
	onLoad(() => {
		page.value = 1;
		getData();
	})
	onReachBottom(() => {
		page.value += 1;
		getData();
	})

	const handleBack = () => {
		uni.navigateBack()
	}
	const toBookDetails = (item) => {
		uni.setStorageSync('tempOrderDetails', item)
		navigateTo({
			url: `/subpages/pages/bookDetails/index`
		})
	}

	const getData = async () => {
		var searchData = {};
		if (status.value >= 0) {
			searchData = {
				page: page.value,
				limit: 10,
				status: status.value,
			}
		} else {
			searchData = {
				page: page.value,
				limit: 10,
			}
		}
		let res = await bookOrderList(searchData)
		if (res?.code) {
			console.log(res.data);
			const tempList = res.data?.list || []
			if (page.value == 1) {
				mList.value = []
			}
			mList.value = mList.value.concat(tempList)

			if (!tempList.length) {
				if (page.value > 1) {
					page.value = page.value - 1
				}
			}
		} else {
			if (page.value > 1) {
				page.value = page.value - 1
			}
		}
	}

	const changeTab = (e) => {
		console.log(e.index);
		const index = e.index;
		if (index == 1) {
			status.value = 1;
		} else if (index == 2) {
			status.value = 2;
		} else if (index == 3) {
			status.value = 0;
		} else {
			status.value = -1;
		}
		page.value = 1;
		getData();
	}
</script>

<style lang="scss" scoped>
	.h-view {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #DADADA;

		.order-no {
			margin: 18rpx 20rpx;
			font-size: 26rpx;
			color: #1D161F;
		}

		.stutas {
			margin: 18rpx 20rpx;
			font-size: 26rpx;
			color: #26A0FF;
		}
	}

	.content {
		width: 100%;
		display: flex;
		flex-direction: row;

		.cover {
			width: 146rpx;
			height: 146rpx;
			display: block;
			margin: 18rpx 20rpx;
			border-radius: 12rpx;
			overflow: hidden;
		}

		.right-content {
			flex: 1;
			display: flex;
			flex-direction: column;

			.name {
				font-size: 34rpx;
				margin-top: 20rpx;
				color: #151515;
				font-weight: bold;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.project {
				margin-top: 11rpx;
				font-size: 26rpx;
				color: #4EA0DF;
			}

			.time {
				margin-top: 6rpx;
				font-size: 26rpx;
				color: #7A7A7A;
			}
		}
	}
</style>